<div class="controls">
    <a class="prev"></a>
    <div class="images scrollable popup-image">
        <div class="items">
            <?php foreach ($pimgages as $img): ?>
                <div class="item">
                    <div>
                        <?php Util::thumbnailImage($img, array(605, 500)) ?>
                    </div>
                </div>
            <?php endforeach ?>
        </div>
    </div>
    <a class="next"></a>
    <div class="buttons">
        <div>
            <div class="gradient left">
                <a class="prev-product" onclick='javascript:void(0)'>
                    <?php
                    if (isset($typename)):
                        echo Yii::t('default', 'Previous {item}', array('{item}' => $typename));
                    else:
                        echo Yii::t('default', 'Previous');
                    endif
                    ?>
                </a>
            </div>
            <div class="gradient right">
                <a class="next-product" onclick='javascript:void(0)'>
                    <?php
                    if (isset($typename)):
                        echo Yii::t('default', 'Next {item}', array('{item}' => $typename));
                    else:
                        echo Yii::t('default', 'Next');
                    endif
                    ?>
                </a>
            </div>
        </div>
    </div>
    <div class="loading">
    </div>
</div>
<div class="content">
    <div class="title">
        <a href="<?php echo $this->createUrl('product/view', array('id' => $pid)) ?>">
            <?php echo $pname ?>
        </a>
    </div>
    <div>
        <?php echo $pcontent ?>
    </div>
    <div>
        <?php $btn_cart = 'btn_' . $pid; ?>
        <a productId="<?php echo $pid; ?>" productName="<?php echo $pname; ?>" productPrice="<?php echo $pprice; ?>" productPromotion="<?php echo $ppromotion; ?>" id="<?php echo $btn_cart ?>" class="btn btn-warning add_to_cart_btn btn_add_cart" href="#">
            Thêm vào giỏ hàng
        </a>
    </div>
</div>
<script type="text/javascript">
    jQuery(function(){
        jQuery("div.images.scrollable").scrollable();

        jQuery('.controls .prev').mouseover(function() {
            jQuery(this).css('background-image', 'url("./css/img/left-arrow.png")');
            jQuery('.controls .next').css('background-image', 'url("./css/img/right-arrow.png")');
        }).mouseout(function(){
            jQuery(this).css('background-image', 'none');
            jQuery('.controls .next').css('background-image', 'none');
        });
        jQuery('.controls .next').mouseover(function() {
            jQuery('.controls .prev').css('background-image', 'url("./css/img/left-arrow.png")');
            jQuery(this).css('background-image', 'url("./css/img/right-arrow.png")');
        }).mouseout(function(){
            jQuery('.controls .prev').css('background-image', 'none');
            jQuery(this).css('background-image', 'none');
        });
	
        var prev = jQuery('.buttons .prev-product');
        var next = jQuery('.buttons .next-product');

        CURRENT = IDS.indexOf(<?php echo $pid ?>);
        var currentUrl =  '<?php
        if (isset($type)):
            echo $this->createUrl('product/ajaxView', array('id' => $pid, 'type' => $type));
        else:
            echo $this->createUrl('product/ajaxView', array('id' => $pid));
        endif
        ?>';

                function sendAjaxRequest(id) {
                    jQuery.ajax({
                        url: currentUrl.replace('/id/<?php echo $pid ?>', '/id/'+id),
                        beforeSend: function() {
                            jQuery('.controls .loading').css('display', 'block');
                        },
                        cache: false,
                        success: function(html){
                            jQuery('#product-overlay .overlay-content').html(html);
                        }
                    });
                };
    
                if (!hasPreviousID()) {
                    prev.addClass('disabled');
                } else {
                    prev.click(function(){
                        var id = IDS[CURRENT - 1];
                        sendAjaxRequest(id);
                    });
                }
	
                if (!hasNextID()) {
                    next.addClass('disabled');
                } else {
                    next.click(function(){
                        var id = IDS[CURRENT + 1];
                        sendAjaxRequest(id);
                    });
                }

                jQuery(document).keyup(function(event) {
                    if (event.which == 37 && !prev.hasClass('disabled')) {
                        /* left arrow */
                        prev.click();
                    } else if (event.which == 39 && !next.hasClass('disabled')) {
                        /* right arrow */
                        next.click();
                    }
                });
            });
</script>
